<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- 
      v-model 是个语法糖, 它的展示形式是由 v-bind 与 v-on 两个指令来着

        用在表单元素时,展开形式如下
          v-model="msg"
          =>
          v-bind:value="msg"
          v-on:input="msg = $event.target.value"

        用在组件上时,展开形式如下
          Vue3:
              v-model="msg"
              =>
              v-bind:modelValue="msg"
              v-on:update:modelValue="msg = $event"

          Vue2:
              v-model="msg"
              =>
              v-bind:value="msg"
              v-on:input="msg = $event"

              

     -->

    <div id="app"></div>

    <script type="module">
      import Vue from "./lib/vue2.esm.browser.js";

      const app = new Vue({
        data() {
          return {
            sonName: "张三",
          };
        },

        template: `
            <Hello v-model="sonName"></Hello>
        `,
      });

      Vue.component("Hello", {
        props: ["value"],

        // Vue2 没有 emits 选项
        // emits: ["update:modelValue"],

        template: `
          <div>
            <h2>Hello, {{ value }}</h2>
            <button @click="$emit('input', '里斯')">修改 里斯</button>
            <button @click="$emit('input', '王五')">修改 王五</button>
          </div>
        `,
      });

      app.$mount("#app");
    </script>
  </body>
</html>
